<template>
  <div>
    <div class="top"></div>
    <van-row>
      <van-col offset="1">
        <h3>问答题</h3>
      </van-col>
    </van-row>
    <div v-for="(item, index) in testList" :key="index">
      <van-row>
        <van-col offset="1">
          <p>{{ item.title }}</p>
        </van-col>
      </van-row>
      <van-cell-group>
        <van-field
          label="答案"
          type="textarea"
          placeholder="请输入答案"
          rows="1"
          :autosize="area"
          v-model="answerList[index].answer"
        />
      </van-cell-group>
    </div>
    <van-submit-bar
      button-text="提交试卷"
      @submit="onSubmit"
    />
    <div class="bottom"></div>
  </div>
</template>

<script>
import { Dialog } from 'vant'
export default {
  name: 'questions',
  data () {
    return {
      area: { maxHeight: 300, minHeight: 100 },
      answerList: [
        {
          answer: '2312321312'
        },
        {
          answer: '23131241545364646'
        },
        {
          answer: '654656324234'
        },
        {
          answer: '242342353254436'
        },
        {
          answer: '42424234234234'
        }
      ],
      testList: [
        {
          title: '你了解的ES6的新特性都有什么？'
        },
        {
          title: '你对互联网的认识是什么'
        },
        {
          title: '你了解的ES6的新特性都有什么？'
        },
        {
          title: '你对互联网的认识是什么'
        },
        {
          title: '阿清学长是不是很帅？'
        }
      ]
    }
  },
  methods: {
    toggle (index) {
      this.$refs.checkboxes[index].toggle()
    },
    onSubmit () {
      Dialog.confirm({
        title: '再次确认',
        message: '你确定要提交吗？'
      }).then(() => {
        // on confirm
        console.log(this.answerList)
        let answer = JSON.stringify(this.answerList)
        console.log(answer)
        if (confirm) {
          this.$router.push('/home')
        }
      }).catch(() => {
        // on cancel
      })
    }
  }
}
</script>

<style scoped>

</style>
